<template>
  <div class="bg-[var(--el-bg-color)] w-1/1 h-1/1 overflow-auto p-40px flex flex-row">
    <div class="w-[320px] mb-[50px] relative">
      <el-image src="./mobilehead.png" class="w-[1/1] align-bottom"></el-image>
      <div class="min-h-[438px] w-1/1 bg-[#E6ECF2]"></div>
      <div class="h-[50px] w-1/1 relative z-1">
        <el-image src="./menu.png" class="w-1/1 h-1/1 absolute"></el-image>
      </div>
      <div class="absolute top-[85px] left-[12px]">
        <el-avatar
          :size="38"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          shape="square"
        ></el-avatar>
        <div
          class="w-[200px] bg-[var(--el-bg-color)] top-[5px] left-[45px] absolute p-[10px] border border-solid border-[1px] border-[#ccc] rounded-[10px]"
        >
          {{ FormData.content }}
        </div>
      </div>
    </div>
    <div class="ml-[70px] w-[400px]">
      <el-form :model="FormData" :rules="rules" ref="formRef">
        <el-form-item label="是否开启">
          <el-switch
            :inactive-value="false"
            :active-value="true"
            inactive-text="否"
            active-text="是"
            v-model="FormData.is_open"
          ></el-switch>
        </el-form-item>
        <el-form-item label="消息类型" prop="msg_type">
          <el-select v-model="FormData.msg_type" :default-first-option="true">
            <el-option v-for="p in list" :key="p.id" :value="p.value" :label="p.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消息内容" v-if="FormData.msg_type === 'text'" prop="content">
          <el-input
            :maxlength="600"
            v-model="FormData.content"
            :show-word-limit="true"
            type="textarea"
            :input-style="{ height: '200px' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="w-1/1 text-center mt-[30px]">
        <el-button type="primary" @click="submit">保存并提交</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { ref, reactive, onBeforeMount } from "vue";
import { SetSubScribeReply, GetSubscribeReply } from "@/api/modules/wechat";

const list = ref([
  { id: 0, value: "text", label: "文字消息" }
  // { id: 1, value: "image", label: "图片消息" },
  // { id: 2, value: "video", label: "视频消息" },
  // { id: 3, value: "voice", label: "音频消息" }
]);
const FormData = reactive({
  msg_type: "text",
  content: "",
  is_open: true
});

const rules = ref<FormRules>({
  msg_type: [{ required: true, message: "必须选择类型", trigger: "blur" }],
  content: [{ required: true, message: "回复内容不可为空", trigger: "blur" }]
});

const formRef = ref<FormInstance>();
const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async valid => {
    if (!valid) return;
    try {
      await SetSubScribeReply(FormData);
      ElMessage.success("成功");
    } catch (error) {}
  });
};

// 获取回复
const getInfo = async () => {
  try {
    const { data } = await GetSubscribeReply();
    const newData = data as any;
    if (newData.msg_type === "text") {
      FormData.content = newData.content;
    } else if (newData.msg_type === "video") {
    }
  } catch (error) {}
};

onBeforeMount(() => {
  getInfo();
});
</script>

<style></style>
